<!-- <template>
  <div>
    <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1"><router-link to="/">主页</router-link></el-menu-item>
      <el-menu-item index="2" :style="{float: 'right'}">
        <router-link v-show="!user.name" to="/login">登录</router-link>
        <el-dropdown @command="loginOut">
          <span :style="{color:'#FFF'}" v-show="user.name">
          {{user.name}}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command>登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
    <el-card class="box-card">
      <p>Hello {{user.name}}</p>
    </el-card>
  </div>
</template> -->
<template>
  <div>
  <el-container style="height: 100vh; border: 1px solid #918f8f">
  <el-aside width="15%" style="background-color: rgb(109, 109, 112)">
    <el-menu :default-openeds="['1', '2']" default-active="2-1" @select="handleMenuSelect">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-menu"></i>域</template>
        <el-menu-item-group>
          <!-- <template slot="title">域</template> -->
          <el-menu-item index="1-1">域信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>用户</template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="2-1">用户信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="display: flex; justify-content: space-between; align-items: center; font-size: 18px; line-height: 60px;">
      <div>认证系统</div>
      <div>
        <!-- <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
        <el-dropdown @command="loginOut">
          <span :style="{color:'#FFF'}" v-show="user.name">
          {{user.name}}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command>登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    
    <el-main>
      <!-- <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table> -->
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        user:{
          name:'cdn'
        },
        tableData: Array(20).fill(item)
      }
    },
    // data() {
    //   return {
    //     activeIndex:'1',
    //     user:{
    //       name:''
    //     }
    //   }
    // },
    //注释掉了
    beforeCreate(){
      // 当主页刷新时，如果服务端设置的token
      // 的时效到了的话，便会提示未登录
      this.$http.get('/api/token')
        .then(res => {
          console.dir(res.data)
          if (res.data.error) {
            this.userLoginOut();
            this.$message.error(res.data.error);
            this.user.name = null;
            return false;
          }else{
            let username = localStorage.getItem('username');
            if (username) {
              this.user.name = username;
            }
          }
        })
        .catch(err => {
            this.$message.error(`${err.message}`)
        })
      
    },
      created() {
      // 使用路由的 push 方法将路由切换到 /userInfo
      this.$router.push('/userInfo');
    },


    methods: {
      ...mapActions(['userLoginOut']),
      // 登出loginOut
      loginOut(){
        this.userLoginOut();
        this.user.name = null;
        if (!this.$store.state.token) {
            this.$router.push('/login')
            this.$message.success('登出成功');
        } else {
            this.$message.success('登出失败');
        }
        
      },
      handleMenuSelect(index) {
      console.log('Selected Index:', index);
      if (index === '1-1') {
        this.$router.push('/domainInfo');
      } else if (index === '2-1') {
        this.$router.push('/userInfo');
      }
    },
    }
  }
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>